<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        v-if="isShow"
        type="selection"
        align="center"
        fixed
      ></el-table-column>
      <el-table-column
        v-if="isShow"
        type="index"
        align="center"
        fixed
        label="#"
      ></el-table-column>
      <el-table-column
        v-for="(items, index) in tableHeader"
        :key="index"
        :prop="items.prop"
        :label="items.label"
        :width="items.width"
      >
        <template slot-scope="scope">
          <div v-if="items.oper">
            <el-button
              v-for="(item, index) in items.oper"
              :key="index"
              @click="item.clickFun(scope.row)"
              :type="item.type"
              :icon="item.icon"
              >{{ item.name }}</el-button
            >
          </div>
          <div v-else>
            <span> {{ scope.row[items.prop] }}</span>
          </div>
          <div>
            <el-switch
              v-if="items.prop === 'userstate'"
              :value="scope.row.value"
              disabled
            >
            </el-switch>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    tableHeader: {
      type: Array,
      default: () => [],
    },
    isShow: {
      type: Boolean,
      default: () => false,
    },
  },
};
</script>

<style></style>
